/*
 * @Author: yuanxiang 
 * @Date: 2018-05-14 18:00:14 
 * @Last Modified by: hy
 * @Last Modified time: 2018-06-12 11:51:46
 */
<template>
    <div id="city" style="min-width:20rem;min-height:100px;height:820px"></div>
</template>

<script>
import echarts from "echarts";
require("echarts/map/js/province/henan");
export default {
  data() {
    return {
      mapChart: null
    };
  },
  props: {
    hoverObj: {
      type: Object,
      default: () => {
        return {};
      }
    },
    mapHoverData: {
      type: Array,
      default: () => {
        return [];
      }
    },
    cityId: {
      type: Number,
      default: () => {
        
      }
    }
  },
  watch: {
    mapHoverData(res) {
      this.initHeNan()
    }
  },
  mounted() {
    this.initHeNan();
  },
  methods: {
    resultHtml(name, cityObj) {
      return (
        "<div style='width:100%;height:100%;text-align:left;color:#31cee6'>" +
        "<span style='padding-bottom:5px'>" +
        name +
        "</span></br><span>门店数量" +
        "<span style='float:right;'>" +
        cityObj.storeNum +
        "家</span></span>" +
        "</span></br>累计成交套数" +
        "<span style='float:right;'>" +
        cityObj.incomeSum +
        "套</span>" +
        "</span></br>总收入" +
        "<span style='float:right;'>" +
        cityObj.dealNum +
        "元</span>" +
        "</div>"
      );
    },
    initHeNan() {
      var self = this;
      var option = {
        title: {
          x: "center",
          textStyle: {
            color: "white"
          }
        },
        tooltip: {
          trigger: "item",
          position: "top",
          extraCssText:
            "text-align:center;background-color:rgba(0,0,0,0.8);background-size:100% 100%;width:30%;height:100px;color:#31cee6)",
          formatter: function(params) {
            var name = params.name;
            var result = "";
            var itemHover = {};
            var obj = {};
            if (name === "洛阳市") {
              itemHover = self.mapHoverData[0];
              obj = {
                storeNum: itemHover.storeNum || 0,
                dealNum: itemHover.dealNum || 0,
                incomeSum: itemHover.totalAchievement || 0
              };
              result = self.resultHtml(name, obj);
            } else if (name === "郑州市") {
              itemHover = self.mapHoverData[1];
              obj = {
                storeNum: itemHover.storeNum || 0,
                dealNum: itemHover.dealNum || 0,
                incomeSum: itemHover.totalAchievement || 0
              };
              result = self.resultHtml(name, obj);
            } else {
              obj = {
                storeNum: 0,
                dealNum: 0,
                incomeSum: 0
              };
              result = self.resultHtml(name, obj);
            }
            // 收入、数量、成交套数
            return result;
          }
        },
        visualMap: {
          show: false,
          min: 0,
          max: 484218,
          left: "left",
          top: "bottom",
          text: ["高", "低"], // 文本，默认为数值文本
          calculable: true,
          seriesIndex: [1],
          inRange: {
            color: ["rgba(52,166,202,0)", "#34A6CA"]
          }
        },
        geo: {
          map: "河南",
          // 地图中心经纬度，郑州
          center: [113.65, 34],
          // 百度地图缩放
          zoom: 1, // 是否缩放 // 1.2 => 1
          roam: false,
          label: {
            normal: {
              show: true,
              textStyle: {
                color: "white"
              }
            },
            emphasis: {
              show: true,
              textStyle: {
                color: "white"
              }
            }
          },
          itemStyle: {
            normal: {
              borderColor: "#31cee6",
              areaColor: "transparent",
              borderWidth: 1
            },
            emphasis: {
              areaColor: "#34A6CA"
            }
          }
        },
        series: [
          {
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: 20,
            symbol:
              "path://M1705.06,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705.06,1318.313z",
            symbolRotate: 35,
            label: {
              normal: {
                formatter: "{b}",
                position: "right",
                show: false
              },
              emphasis: {
                show: true
              }
            }
          },
          {
            name: "门店",
            type: "map",
            geoIndex: 0,
            data: [
              {
                name: "郑州市",
                value: this.mapHoverData[1].dealNum
              },
              {
                name: "济源市",
                value: 0
              },
              {
                name: "三门峡市",
                value: 0
              },
              {
                name: "焦作市",
                value: 0
              },
              {
                name: "新乡市",
                value: 0
              },
              {
                name: "鹤壁市",
                value: 0
              },
              {
                name: "安阳市",
                value: 0
              },
              {
                name: "濮阳市",
                value: 0
              },
              {
                name: "开封市",
                value: 0
              },
              {
                name: "商丘市",
                value: 0
              },
              {
                name: "周口市",
                value: 0
              },
              {
                name: "许昌市",
                value: 0
              },
              {
                name: "平顶山市",
                value: 0
              },
              {
                name: "漯河市",
                value: 0
              },
              {
                name: "驻马店市",
                value: 0
              },
              {
                name: "信阳市",
                value: 0
              },
              {
                name: "南阳市",
                value: 0
              },
              {
                name: "洛阳市",
                value: this.mapHoverData[0].dealNum
              }
            ]
          }
        ]
      };
      setTimeout(() => {
        self.mapChart = echarts.init(document.getElementById("city"));
        self.mapChart.setOption(option);
        self.mapChart.on("click", function(params) {
          var obj = {}
          if (params.name === "洛阳市") {
            obj = {
              name: params.name,
              cityId: 36001
            }
            self.$emit("on-map", obj);
          } else if (params.name === "郑州市") {
            obj = {
              name: params.name,
              cityId: 36002
            }
            self.$emit("on-map", obj)
          }
        });
      }, 10);
    }
  }
};
</script>
<style>
</style>
